<template>
    <view class="flex_box">
      <view class="bar_box">
        <image class="imgurl_box" :src="imgurl" @click="goPage('content')" />
        <image class="imgurl_box" :src="imgurl1" @click="goPage('person')"  />
        <!-- <image class="imgurl_box" :src="imgurl2" v-if="STATE === 'admin'"  /> -->
      </view>
        
    </view>
      
  </template>
  <script>
  export default {
    props: {
      name: {
        type: String,
        default: '张婷婷'
      },
      showState: {
        type: String,
        default: 'content'
      },
    },
    data() {
      return {
        STATE: 'admin',
        imgurl1: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202345.png',
        imgurl2: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202345.png',
        imgurl: 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202347.png'
      }
    },
    methods: {
      goPage (state) {
        console.log('state--->11', state);
        if (state === 'person') {
          this.imgurl1 = 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202348.png'
          this.imgurl = 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202347.png'
        } else {
          this.imgurl1 = 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202345.png'
          this.imgurl = 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202344.png'
        }
  
        
        this.$emit('changeState', state)
      },
    },
    mounted () {
      this.STATE = 'admin'
      if (this.showState === 'person') {
        this.imgurl1 = 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202348.png'
        this.imgurl = 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202347.png'
      } else {
        this.imgurl1 = 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202345.png'
        this.imgurl = 'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202344.png'
      }
      
    }
  }
  </script>
  <style lang="scss" scoped>
  .flex_box {
    padding: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .bar_box {
      background-color: #121212;
      height: 120rpx;
      border-radius: 110rpx;
      .imgurl_box {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100rpx;
        margin: 10rpx;
      }
    }
  }
  </style>